<template>

    <el-tabs :tab-position="tabPosition" style="height: 200px;">
        <el-tab-pane label="申请报修列表">
        <div v-for="(item,index) in dataList" >
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>报修记录</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <div  class="text item">
                    原因 ：  {{item.reason}}
                </div>
                <div  class="text item">
                    地址：   {{item.location}}
                </div>
                <div  class="text item">
                   时间：   {{item.applyTime | dateTimeFormat}}
                </div>
                <div  class="text item">
                   审核状态 ：   {{item.status}}
                </div>
            </el-card>
        </div>

        </el-tab-pane>


        <el-tab-pane label="申请报修">
            <el-form :label-position="labelPosition" label-width="80px" :model="repairData">
                <el-form-item label="申报原因">
                    <el-input type="textarea"  v-model="repairData.reason"></el-input>
                </el-form-item>
                <el-form-item label="维修位置">
                    <el-input v-model="repairData.location"></el-input>
                </el-form-item>
                <div>
                   <div style="font-size: 30px ;width: auto ;" >请上传图片</div>
                    <el-upload
                            action="#"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            class="avatar-uploader"
                            accept="image/png,image/gif,image/jpg,image/jpeg"
                            :show-file-list="false"
                            :on-change="onChangeFile"
                            :before-upload="beforeAvatarUpload"
                            :http-request="uploadImg">
                        <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">
                        <i v-else class="el-icon-plus"></i>
                    </el-upload>
                </div>
                <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
    import {post} from "@/utils/request";

    export default {
        name: "Repair",
        data() {
            return {
                tabPosition: 'top',
                labelPosition:"left",
                dialogImageUrl: '',
                dialogVisible: false,
                repairData:{
                    reason:'',
                    location:'',
                    photo:'',
                    userId:'',
                    status:''
                },
                dataList:[]
            };
        },
        mounted() {
          this.getDataList();
        },

        methods:{

            getDataList(){
                let userId=localStorage.getItem("userId")
                let data={
                    page: {
                        page: 1,
                        size: 1000
                    },
                    userId

                }
                post("/api/repair/page",data).then(res=>
                    {
                        console.log("数据：", res);
                           this.dataList=res.data.data.records
                        console.log("数据：", this.dataList);
                    }

                ).catch(err => {
                    console.log(err);
                })

            },
            onSubmit(){
                this.repairData.photo = this.dialogImageUrl
                let repairData = this.repairData
                post('/api/repair/add', repairData)
                    .then(res => {
                        console.log("添加信息：", res);
                        if (res.data.code == 200) {
                            this.$message({
                                message: '添加成功！',
                                type: 'success'
                            });
                            Object.keys(this.repairData).forEach(key => (this.repairData[key] = ''))
                            this.dialogImageUrl=''
                            this.getDataList();
                        } else {
                            this.$message({
                                message: '添加失败！',
                                type: 'error'
                            });
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

            onChangeFile(file) {
                this.avatarUrl = URL.createObjectURL(file.raw);
            },
            //图片上传之前的回调函数
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                return isLt2M;
            },
            //图片上传函数
            uploadImg(params) {
                console.log(params);
                const config = {
                    headers: {'Content-Type': 'multipart/form-data'},
                }
                const file = params.file

                //formdata
                const fd = new FormData();//通过form数据格式来传
                fd.append("file", file); //传文件
                post("/upload/img", fd, config)
                    .then(res => {
                        console.log(res);
                        this.dialogVisible=true
                        this.dialogImageUrl =`http://127.0.0.1:8081/download/${res.data.data}`
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
        }


    };
</script>
<style>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
